<style lang="less">
	page{
		background: #f6f6f6;
	}
	.hader{
		background: #FFFFFF;
		.imgture{
			width: 100%;
			height: auto;
		}
		.header-title{
			padding: 20upx 30upx;
			box-sizing: border-box;
			border-bottom: 1px solid #ededed;
			.title{
				font-size:32upx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:36upx;
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
			}
		}
		.header-poc{
			padding: 20upx 30upx;
			box-sizing: border-box;
			.time{
				font-size:22upx;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:36upx;
				overflow: hidden;
				.pos{
					float: right;
					font-size:22upx;
					color:rgba(219,194,145,1);
				}
			}
			.jianjie{
				font-size:22upx;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:36upx;
			}
		}
	}
	.main-box{
		padding: 20upx 30upx;
		box-sizing: border-box;
	}
	.main{
		margin-bottom: 20upx;
		background: #FFFFFF;
		text-align: center;
		border-radius:12px;
		.main-title{
			padding: 30upx;
			box-sizing: border-box;
			border-bottom: 1px solid #ededed;
			.main-list-for{
				display: flex;
				justify-content: space-between;
				font-size:26upx;
				font-weight:bold;
				color:rgba(153,153,153,1);
				line-height:50upx;
			}
		}
		.main-list.footer{
			max-height: 500upx;
		}
		.main-list{
			padding: 10upx 30upx;
			box-sizing: border-box;
			.main-list-for{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ededed;
				padding: 10upx 0;
				.main-list-for-fl{
					width: 78%;
					display: flex;
					align-items: center;
					.imgss{
						width:64upx;
						height:auto;
						border-radius:50%;
						margin-left: 20upx;
						overflow: hidden;
					}
					.num{
						padding: 20upx 0;
						font-size:30upx;
						font-family:'DINCond';
						font-weight:400;
						color:rgba(51,51,51,1);
						line-height:36upx;
						width: 60rpx;
					}
					.name{
						font-size:28upx;
						color:rgba(51,51,51,1);
						line-height:36upx;
						margin-left: 10upx;
						width: 70%;
					}
				}
				.main-list-for-fr{
					font-size:32upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
			}
			.main-list-for:nth-child(1) .num{
				background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/first_icon.png") no-repeat center center;
				background-size: 53upx;
				font-size:30upx;
				font-weight:bold;
				color:rgba(238,183,38,1);
			}
			.main-list-for:nth-child(2) .num{
				background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/second_icon.png") no-repeat center center;
				background-size: 53upx;
				font-size:30upx;
				font-weight:bold;
				color:rgba(155,167,179,1);
			}
			.main-list-for:nth-child(3) .num{
				background: url("https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/third_icon.png") no-repeat center center;
				background-size: 53upx;
				font-size:30upx;
				font-weight:bold;
				color:rgba(179,151,104,1);
			}
			.main-list-for .num.tes{
				background: none;
				color:rgba(51,51,51,1);
			}
			.main-list-for:last-child{
				border-bottom: none;
			}
		}
	}
	.zanwu{
		text-align: center;
	}
	//活动规则
	 .guize{
	   position: fixed;
	   z-index: 101;
	   right: 0;
	   top: 35%;
	   line-height: 60upx;
	   background: #ffffff;
	   color: #ffffff;
	   width: 150upx;
	   text-align: center;
	   font-size: 28upx;
	   border-radius: 30upx 0 0 30upx;
	   overflow: hidden;
	   view{
	     opacity: 0.2;
	     background: #000000;
	   }
	 }
</style>
<template>
	<view class="content">
		<view class="hader">
			<image :src= "'https://static.xpandago.net'+'/'+appGiftSaleVO.activityPicture" class="imgture" mode="widthFix"></image>
			<view class="header-title">
				<view class="title">{{appGiftSaleVO.giftName}}</view>
			</view>
			<view class="header-poc">
				<view class="poc">
					<view class="time">活动时间：{{appGiftSaleVO.startTime}}至{{appGiftSaleVO.endTime}}
						<view class="pos" v-if="appGiftSaleVO.status == 1">未开始</view>
						<view class="pos" v-else-if="appGiftSaleVO.status == 2">进行中</view>
						<view class="pos" v-else-if="appGiftSaleVO.status == 3">已结束</view>
					</view>
					<view class="jianjie">活动简介：{{appGiftSaleVO.activityIntroduction}}</view>
				</view>
			</view>
		</view>
		<view class="main-box">
			<view class="main">
				<view class="main-title">
					<view class="main-list-for">
						<view class="main-list-for-fl">排名</view>
						<view class="main-list-for-fr" v-if="appGiftSaleVO.statisticsDimension==1">销售数量</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==2">团队业绩</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==3">销售金额</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==4">销售金额</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==5">订单数</view>
					</view>
				</view>
				<view class="main-list">
					<view class="main-list-for">
						<view class="main-list-for-fl">
							<view class="num tes" v-if="userDetail.rowNo!='' && userDetail.rowNo!=null">{{userDetail.rowNo}}</view>
							<view class="num tes" v-else>暂无</view>
							<image :src= "'https://static.xpandago.net'+'/'+userDetail.headIco" class="imgss" mode="widthFix"></image>
							<view class="name">{{userDetail.userName}}</view>
						</view>
						<view class="main-list-for-fr" v-if="userDetail.rowNo=='' || userDetail.rowNo==null">0</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==1">{{userDetail.count}}</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==2">¥ {{userDetail.sum}}</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==3">¥ {{userDetail.totalSales}}</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==4">¥ {{userDetail.totalSales}}</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==5">{{userDetail.orderNum}}</view>
					</view>
				</view>
			</view>
			<view class="main" v-if="detailsVOS!='' && detailsVOS!=null">
				<!-- <view class="main-list"> -->
				<scroll-view scroll-y="true" class="main-list footer" @scrolltolower="lower">	
					<view class="main-list-for"  v-for="(itme,i) in detailsVOS">
						<view class="main-list-for-fl">
							<view class="num">{{itme.rowNo}}</view>
							<image :src= "'https://static.xpandago.net'+'/'+itme.headIco" class="imgss" mode="widthFix"></image>
							<view class="name">{{itme.userName}}</view>
						</view>
						<view class="main-list-for-fr" v-if="appGiftSaleVO.statisticsDimension==1">{{itme.count}}</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==2">¥ {{itme.sum}}</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==3">¥ {{itme.totalSales}}</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==4">¥ {{itme.totalSales}}</view>
						<view class="main-list-for-fr" v-else-if="appGiftSaleVO.statisticsDimension==5">{{itme.orderNum}}</view>
					</view>
					<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
				</scroll-view>
			</view>
		</view>
		 <view class="guize" @tap="guize(appGiftSaleVO.giftpackSaleId)"><view>活动规则</view></view>
	</view>
</template>
<script>
	import api from '@/common/api';
	export default {
		data() {
			return {
				token:'',
				userDetail:{},
				detailsVOS:[],
				appGiftSaleVO:{},
				id:'',
				loadMoreText: "加载中...",
				showLoadMore: false,
				totalPage:'',//总页数
				page:1,
				isShow:false
			}
		},
		onLoad(options) {
			this.id = this.getQueryVariable('id')
			if(Boolean(options.id) != false){
				this.id = options.id
			}
			// console.log(this.id)
			this.token=uni.getStorageSync('token')
			this.giftDetail(this.page)
		},
		//下拉刷新
		 onPullDownRefresh() {
			this.page=1
			this.detailsVOS=[]
			this.giftDetail(this.page);
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			//获取token与id
			getQueryVariable(variable){
				let obj  = new URLSearchParams(window.location.search)
				let value = obj.get(variable)
				
				return value
			       // var query = window.location.search.substring(1);
			       // var vars = query.split("&");
			       // for (var i=0;i<vars.length;i++) {
			       //         var pair = vars[i].split("=");
			       //         if(pair[0] == variable){return pair[1];}
			       // }
			       // return false;
			},
			async giftDetail(page){
				const [err, res] = await api.giftDetail({
					query: {
						page:page,
						only:this.id
					},
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 console.log(res)
				 if(res.data.code == 0){
					 this.userDetail=res.data.data.userDetail
					 this.detailsVOS = [...this.detailsVOS, ...res.data.data.detailsVOS];
					 this.appGiftSaleVO=res.data.data.appGiftSaleVO
					 this.totalPage=res.data.data.totalPage
					  if(this.detailsVOS.length==0){
					 	  this.loadMoreText = "暂无数据!"
					 	 this.showLoadMore = true;
					 }else{
					 	this.showLoadMore = false; 
					 }
				 }
			},
			lower() {
				this.showLoadMore = true;
				if (this.page >= this.totalPage) {
					this.loadMoreText = "没有更多数据了!"
					return;
				}else{
					setTimeout(() => {
						this.page++
						this.giftDetail(this.page)
					}, 300);
				}
			},
			guize(id){
				uni.navigateTo({
				  url: "/pages/stimulateGz/stimulateGz?id="+id
				})
			}
		}
	}
</script>
